<template>
  <div class="container">
    <div class="input-group">
      <input v-model="audioStreamUrl" placeholder="输入音频流地址" />
      <button class="secondary" @click="startAudioStream">推送音频流</button>
    </div>
    <button class="primary" @click="stopAudioStream" :disabled="!isAudioStreaming">停止音频推流</button>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { handleStream, stopStream } from '@/api/webrtc/stream-utils.js'

const audioStreamUrl = ref('')
const audioStream = ref(null)
const audioPeerConnection = ref(null)
const isAudioStreaming = ref(false)
const errorMessage = ref('')
const isUserMedia = ref(true);

async function startAudioStream() {
  if (isUserMedia.value) {
    audioStream.value = await navigator.mediaDevices.getUserMedia({ video: false, audio: true })
  }else {
    audioStream.value = await navigator.mediaDevices.getDisplayMedia({ video: false, audio: true })
  }

  await handleStream(
    'audio',
    null,
    audioStream,
    audioPeerConnection,
    isAudioStreaming,
    'http://106.54.211.74:1985/rtc/v1/whip/?app=live&stream=livestream7'
  )
}

function stopAudioStream() {
  stopStream(audioStream, audioPeerConnection, isAudioStreaming, null, null)
  console.log('音频推流已停止')
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus {
  outline: none;
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
}

button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

button.primary {
  background: var(--el-color-primary);
  color: white;
}

button.primary:hover {
  background: var(--el-color-primary-light-3);
}

button.primary:disabled {
  background: var(--el-color-primary-light-7);
  cursor: not-allowed;
}

button.secondary {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  color: var(--el-text-color-regular);
}

button.secondary:hover {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.error {
  margin-top: 1rem;
  color: var(--el-color-danger);
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .container {
    margin: 1rem;
    padding: 1rem;
  }
  
  .input-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  button {
    width: 100%;
  }
}
</style>
